La API de Google Search, te permite integrar el módulo de búsqueda de Google en tus páginas web o en este caso en tu blog.
Puedes probarlo a la izquierda de mi blog, teclea cualquier cosa y dale buscar.
A diferencia de la barra de búsqueda de Blogger, los resultados aparecen en tu misma página y no en otra aparte, una ventaja para que tus visitas no vayan a otro lado.
Para implementar este módulo de búsqueda, tienes que seguir los pasos que listo a continuación, se puede aplicar a cualquier página web, no solo a Blogger.
El código solo permite búsquedas en tu blog, pero se puede modificar para hacerlo que busque en la Web.
Leer +/-
01 Primero tienes que registrarte en Google AJAX search API, te asignan una "llave", la cual te permite usar el módulo en tu sitio, si no lo haces, te mostrará el error de "invalid API key supplied", este error también se muestra cuando le das "preview" a tu página.
Google utiliza esta "llave" para darle seguimiento al uso de la API
Copia la "llave" para utilizarla en el siguiente paso.
02 Ahora hay que poner en la sección de <head> el siguiente código:
<!--Google Search -->
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
<script src="http://www.google.com/uds/api?file=uds.js&v=0.1&key=xxxxxxxxxxxx" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();
// create a searcher options object
// set up for open expansion mode
// load a searcher with these options
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
// site restricted blog search
var blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("En algun lugar");
blogSearch.setSiteRestriction("http://miguel_ps.blogspot.com");
searchControl.addSearcher(blogSearch, options);
// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));
// Execute an inital search
//searchControl.execute("Fotografo");
}
//]]>
</script>
En la línea donde dice key=xxxxxxxxxx, pegas la "llave" del punto uno.
Cambia las líneas siguientes con el título que quieres que aparezca y la dirección de tu blog, el título debe ser corto para que no ocupe dos líneas y se vea mal.
blogSearch.setUserDefinedLabel("En algun lugar");
blogSearch.setSiteRestriction("http://miguel_ps.blogspot.com");
03 Ahora en la sección de <style> debes colocar las siguientes líneas, esto nos permite resaltar en negrita los términos buscados y especificar el ancho de la columna de resultados.
<!-- Google Search -->
/* bold the section header */
.gsc-resultsRoot-siteSearch .gsc-title {
font-weight : bold;
}
/* the GSearchControl CSS Classes
* .gsc-control : the primary class of the control
*/
.gsc-control {
width: 200px;
}
Para cambiar el ancho solo cambia width: 200px; por el tamaño que necesitas, por default son 300 pixeles.
04 Cambia donde dice <body> a <body onload="OnLoad()">
05 Donde quieras que aparezca el cuadro de búsqueda inserta el siguiente código:
<div id="searchcontrol"/></div>
06 Si quieres realizar una búsqueda inicial quita las "//" de la siguiente línea y reemplaza "Fotografo" por el termino que quieres buscar.
//searchControl.execute("Fotografo");
Antes de guardar los cambios a tu plantilla, dale una vista previa para asegurarte de que todo va bien, te aparece un error de "invalid API key supplied", cuando publicas ya no aparece ( es por la dirección de la página en preview ).
Si todo se vé bien, guardas los cambios y vuelves a publicar tu blog.
Listo!
Cualquier duda o comentario estoy a tus órdenes.
Si deseas mayor información de la API de Google, consulta estos sitios:
Update: Al ver este post en Internet Explorer mostraba un aviso de seguridad por la forma en que desplegaba el código en el marco en línea <iframe>, ya lo modifiqué para que no aparezca ningún aviso, cosas de Internet Explorer...
Usando API de Google Search en el blog
Suscribirse a:
Comentarios de la entrada (Atom)
4 comentarios:
Esta muy bueno el buscador, tenia este codigo hace un tiempo y no podia cambiar el ancho, pero leyendo tu articulo, le agregue las lineas al estilo y ahora me funciona del tamaño que yo quiero. Gracias Miguel.
Saludos
Gera7,
De nada!
Que bueno que te sirvió, cuando cambié a la nueva versión de Blogger perdí todas mis modificaciones, alguna día las volveré a poner....
Saludos!
Hola soy nuevo en esto de los blogs, me gustaria poner el buscador en mi blogs, veo que es una información bastante útil, pero al ser inesperto solo consegui terner mi clave y no se seguir con el segundo paso.
¿Me podrías ayudar, estaria muy agradecido?
Este es mi blog
http://rafaelmarincruz.blogspot.com/
Gracias
Me sale este error.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Lo estoy colocanto arriba de la plantilla.
Publicar un comentario